<template>
  <div class="community">
    <!-- header -->
    <market-header></market-header>
    <!-- main -->
    <section class="container">
      <article class="left">
        <img :src="userImg"
             alt="用户头像">
        <h1>{{ username }}</h1>
      </article>
      <article class="right">
        <rh-input type='textarea'
                  :rows="5"
                  placeholder='请输入内容'
                  ref="textarea"></rh-input>
        <button class="btn"
                @click="submit">发送</button>
        <hr>
        <comment-box :username='username'
                     :userImg='userImg'
                     :comment='comment'
                     v-if="comment"></comment-box>
      </article>
    </section>
    <!-- footer -->
    <market-footer></market-footer>
  </div>
</template>

<script>
import MarketHeader from "@/components/common/MarketHeader"
import MarketFooter from "@/components/common/MarketFooter"
import RhInput from "@/components/basic/rh-input"
import CommentBox from "@/components/common/CommentBox"
export default {
  components: {
    MarketHeader,
    MarketFooter,
    RhInput,
    CommentBox
  },
  data () {
    return {
      username: localStorage.getItem('username'),
      userImg: '',
      comment: ''
    }
  },
  created () {
    this.$http.post('http://localhost:3000/userInfo', { username: this.username }).then(response => {
      this.userImg = response.data.data.userImg;
    })
  },
  methods: {
    submit () {
      this.comment = this.$refs.textarea.newvalue;
      // console.log(this.$refs.textarea.newvalue);

    }
  }
}
</script>

<style lang="less" scoped>
.community {
  .container {
    display: flex;
    justify-content: space-between;
    width: 1060px;
    margin: 100px auto;

    .left {
      width: 220px;
      height: 100px;
      line-height: 40px;
      border: 1px solid #ccc;
      background-color: #fff;
      img {
        width: 60px;
        height: 60px;
        padding: 10px;
      }
      h1 {
        width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: top;
        font-size: 20px;
      }
    }
    .right {
      width: 800px;
      height: 500px;
      border: 1px solid #ccc;
      background-color: #fff;

      .rh-input {
        width: 750px;
        margin: 20px auto;
      }
      .btn {
        position: relative;
        left: 25px;
        bottom: 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        outline: none;
        cursor: pointer;
        padding: 5px 20px;
        border-radius: 5px;
        font-size: 14px;
      }
      .btn:hover {
        border-color: #f10;
      }
    }
  }
}
</style>